<template>
  <ui-upload-core
    ref="upload"
    v-model="innerValue"
    :editable="editable"
    :disabled="disabled"
    :multiple="multiple"
    :accept="accept"
    :limit-count="limitCount"
    :limit-size="limitSize"
    :auto-upload="autoUpload"
    :upload-method="uploadMethod"
    @upload-success="handleUploadSuccess"
    @file-list-change="handleFileListChange"
  >
    <template slot-scope="scope">
      <slot v-bind="scope" />
    </template>
  </ui-upload-core>
</template>
<script>
import UiUploadCore from './upload-core'

export default {
  name: 'UiUploadSeparateHandle',
  inject: ['UiUploadSeparateProvide'],
  components: {
    UiUploadCore
  },
  computed: {
    innerValue: {
      get () {
        return this.UiUploadSeparateProvide.innerValue
      },
      set (val) {
        this.UiUploadSeparateProvide.innerValue = val
      }
    },
    editable () {
      return this.UiUploadSeparateProvide.editable
    },
    multiple () {
      return this.UiUploadSeparateProvide.multiple
    },
    disabled () {
      return this.UiUploadSeparateProvide.disabled
    },
    accept () {
      return this.UiUploadSeparateProvide.accept
    },
    limitCount () {
      return this.UiUploadSeparateProvide.limitCount
    },
    limitSize () {
      return this.UiUploadSeparateProvide.limitSize
    },
    autoUpload () {
      return this.UiUploadSeparateProvide.autoUpload
    },
    uploadMethod () {
      return this.UiUploadSeparateProvide.uploadMethod
    }
  },
  mounted () {
    this.UiUploadSeparateProvide._removeFile = (fileId) => {
      this.$refs.upload.removeFile(fileId)
    }
  },
  methods: {
    handleUploadSuccess (evt) {
      this.UiUploadSeparateProvide.handleUploadSuccess(evt)
    },
    handleFileListChange (evt) {
      this.UiUploadSeparateProvide.handleFileListChange(evt)
    }
  }
}
</script>
